/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * Global layout + default content. Design tokens: styles/variables.css
 * (Figma Components · Build 1 — light 24886:413424, dark 24886:413677).
 */

@layer styles {
	html {
		font-size: 100%;
		box-sizing: border-box;
		scroll-behavior: smooth;
		text-size-adjust: 100%;
		font-variant-ligatures: no-common-ligatures;
	}

	body {
		display: none;
		margin: 0;
		background-color: var(--background-color);
		color: var(--text-color);
		font-family: var(--type-font-family-paragraph);
		font-weight: var(--type-font-weight-paragraph);
		line-height: var(--type-line-height-paragraph-1);
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	body.appear {
		display: block;
	}

	/* Chevrolet: filled primary buttons — dark label on gold (vars in variables.css) */
	html[data-color-scheme='light']
		body.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary),
	html[data-color-scheme='light'] body.theme-chevrolet button:not(.secondary),
	html[data-color-scheme='light']
		body.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button),
	html[data-color-scheme='light'] body.theme-chevrolet button.primary,
	html[data-color-scheme='light']
		.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary),
	html[data-color-scheme='light'] .theme-chevrolet button:not(.secondary),
	html[data-color-scheme='light'] .theme-chevrolet a.button.primary:not(.navbar-dropdown a.button),
	html[data-color-scheme='light'] .theme-chevrolet button.primary,
	html[data-color-scheme='dark']
		body.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary),
	html[data-color-scheme='dark'] body.theme-chevrolet button:not(.secondary),
	html[data-color-scheme='dark']
		body.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button),
	html[data-color-scheme='dark'] body.theme-chevrolet button.primary,
	html[data-color-scheme='dark']
		.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary),
	html[data-color-scheme='dark'] .theme-chevrolet button:not(.secondary),
	html[data-color-scheme='dark'] .theme-chevrolet a.button.primary:not(.navbar-dropdown a.button),
	html[data-color-scheme='dark'] .theme-chevrolet button.primary {
		color: var(--colors-chevrolet-button-label);
	}

	html[data-color-scheme='light']
		body.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):hover,
	html[data-color-scheme='light'] body.theme-chevrolet button:not(.secondary):hover,
	html[data-color-scheme='light']
		body.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
	html[data-color-scheme='light'] body.theme-chevrolet button:not(.secondary):focus-visible,
	html[data-color-scheme='light']
		body.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):hover,
	html[data-color-scheme='light'] body.theme-chevrolet button.primary:hover,
	html[data-color-scheme='light']
		body.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):focus-visible,
	html[data-color-scheme='light'] body.theme-chevrolet button.primary:focus-visible,
	html[data-color-scheme='light']
		.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):hover,
	html[data-color-scheme='light'] .theme-chevrolet button:not(.secondary):hover,
	html[data-color-scheme='light']
		.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
	html[data-color-scheme='light'] .theme-chevrolet button:not(.secondary):focus-visible,
	html[data-color-scheme='light']
		.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):hover,
	html[data-color-scheme='light'] .theme-chevrolet button.primary:hover,
	html[data-color-scheme='light']
		.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):focus-visible,
	html[data-color-scheme='light'] .theme-chevrolet button.primary:focus-visible,
	html[data-color-scheme='dark']
		body.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):hover,
	html[data-color-scheme='dark'] body.theme-chevrolet button:not(.secondary):hover,
	html[data-color-scheme='dark']
		body.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
	html[data-color-scheme='dark'] body.theme-chevrolet button:not(.secondary):focus-visible,
	html[data-color-scheme='dark']
		body.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):hover,
	html[data-color-scheme='dark'] body.theme-chevrolet button.primary:hover,
	html[data-color-scheme='dark']
		body.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):focus-visible,
	html[data-color-scheme='dark'] body.theme-chevrolet button.primary:focus-visible,
	html[data-color-scheme='dark']
		.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):hover,
	html[data-color-scheme='dark'] .theme-chevrolet button:not(.secondary):hover,
	html[data-color-scheme='dark']
		.theme-chevrolet
		a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
	html[data-color-scheme='dark'] .theme-chevrolet button:not(.secondary):focus-visible,
	html[data-color-scheme='dark']
		.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):hover,
	html[data-color-scheme='dark'] .theme-chevrolet button.primary:hover,
	html[data-color-scheme='dark']
		.theme-chevrolet
		a.button.primary:not(.navbar-dropdown a.button):focus-visible,
	html[data-color-scheme='dark'] .theme-chevrolet button.primary:focus-visible {
		color: var(--colors-chevrolet-button-label);
	}

	@media (prefers-color-scheme: light) {
		html:not([data-color-scheme])
			body.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary),
		html:not([data-color-scheme]) body.theme-chevrolet button:not(.secondary),
		html:not([data-color-scheme])
			body.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button),
		html:not([data-color-scheme]) body.theme-chevrolet button.primary,
		html:not([data-color-scheme])
			.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary),
		html:not([data-color-scheme]) .theme-chevrolet button:not(.secondary),
		html:not([data-color-scheme])
			.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button),
		html:not([data-color-scheme]) .theme-chevrolet button.primary {
			color: var(--colors-chevrolet-button-label);
		}

		html:not([data-color-scheme])
			body.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):hover,
		html:not([data-color-scheme]) body.theme-chevrolet button:not(.secondary):hover,
		html:not([data-color-scheme])
			body.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
		html:not([data-color-scheme]) body.theme-chevrolet button:not(.secondary):focus-visible,
		html:not([data-color-scheme])
			body.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):hover,
		html:not([data-color-scheme]) body.theme-chevrolet button.primary:hover,
		html:not([data-color-scheme])
			body.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):focus-visible,
		html:not([data-color-scheme]) body.theme-chevrolet button.primary:focus-visible,
		html:not([data-color-scheme])
			.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):hover,
		html:not([data-color-scheme]) .theme-chevrolet button:not(.secondary):hover,
		html:not([data-color-scheme])
			.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
		html:not([data-color-scheme]) .theme-chevrolet button:not(.secondary):focus-visible,
		html:not([data-color-scheme])
			.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):hover,
		html:not([data-color-scheme]) .theme-chevrolet button.primary:hover,
		html:not([data-color-scheme])
			.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):focus-visible,
		html:not([data-color-scheme]) .theme-chevrolet button.primary:focus-visible {
			color: var(--colors-chevrolet-button-label);
		}
	}

	@media (prefers-color-scheme: dark) {
		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary),
		html:not([data-color-scheme='light']) body.theme-chevrolet button:not(.secondary),
		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button),
		html:not([data-color-scheme='light']) body.theme-chevrolet button.primary,
		html:not([data-color-scheme='light'])
			.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary),
		html:not([data-color-scheme='light']) .theme-chevrolet button:not(.secondary),
		html:not([data-color-scheme='light'])
			.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button),
		html:not([data-color-scheme='light']) .theme-chevrolet button.primary {
			color: var(--colors-chevrolet-button-label);
		}

		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):hover,
		html:not([data-color-scheme='light']) body.theme-chevrolet button:not(.secondary):hover,
		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			button:not(.secondary):focus-visible,
		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):hover,
		html:not([data-color-scheme='light']) body.theme-chevrolet button.primary:hover,
		html:not([data-color-scheme='light'])
			body.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):focus-visible,
		html:not([data-color-scheme='light']) body.theme-chevrolet button.primary:focus-visible,
		html:not([data-color-scheme='light'])
			.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):hover,
		html:not([data-color-scheme='light']) .theme-chevrolet button:not(.secondary):hover,
		html:not([data-color-scheme='light'])
			.theme-chevrolet
			a.button:not(.navbar-dropdown a.button, .secondary):focus-visible,
		html:not([data-color-scheme='light']) .theme-chevrolet button:not(.secondary):focus-visible,
		html:not([data-color-scheme='light'])
			.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):hover,
		html:not([data-color-scheme='light']) .theme-chevrolet button.primary:hover,
		html:not([data-color-scheme='light'])
			.theme-chevrolet
			a.button.primary:not(.navbar-dropdown a.button):focus-visible,
		html:not([data-color-scheme='light']) .theme-chevrolet button.primary:focus-visible {
			color: var(--colors-chevrolet-button-label);
		}
	}

	main.primary {
		color: var(--colors-content-primary);
	}

	/* font sizes (editorial reference)
   42px — HP main story; 38px — topic featured; 32px — HP featured;
   26px — HP bottom list; 18px — sidebar / nav; 16px — body; 14px — tags */

	/* .section[data-base-style="default"] {
  background-color: var(--colors-background-default);
  color: var(--colors-content-primary);
} */

	body.primary {
		background-color: var(--colors-tile-default);
		color: var(--colors-content-primary);
	}

	body.secondary {
		background-color: var(--colors-button-primary);
		color: var(--colors-content-invert-primary);
	}

	body.tertiary {
		background-color: var(--colors-button-primary);
		color: var(--colors-content-invert-primary);
	}

	body.quaternary {
		background-color: var(--colors-button-tertiary);
		color: var(--colors-content-primary);
	}

	[data-spacing-style*='top-large'] {
		padding-top: var(--spacing-64);
	}

	/* fallback fonts */
	@font-face {
		font-family: roboto-fallback;
		size-adjust: 99.529%;
		src: local('Arial');
	}

	header .header,
	footer .footer {
		visibility: hidden;
	}

	header .header[data-block-status='loaded'],
	footer .footer[data-block-status='loaded'] {
		visibility: visible;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.heading {
		padding: 0;
		margin: 0;
		font-family: var(--type-font-family-display);
		font-weight: var(--type-font-weight-display);
		letter-spacing: var(--type-letter-spacing-display-5);
		line-height: 1.2;
	}

	h1,
	.heading-h1 {
		font-size: var(--heading-font-size-xxl);
	}

	h2,
	.heading-h2 {
		font-size: var(--heading-font-size-xl);
	}

	h3,
	.heading-h3 {
		font-size: var(--heading-font-size-l);
	}

	h4,
	.heading-h4 {
		font-size: var(--heading-font-size-m);
	}

	h5,
	.heading-h5 {
		font-size: var(--heading-font-size-s);
	}

	h6,
	.heading-h6 {
		font-size: var(--heading-font-size-xs);
	}

	.heading-largest {
		font-size: var(--heading-font-size-xxxl);
	}

	p {
		font-size: var(--body-news);
		line-height: var(--type-line-height-paragraph-1);
		font-weight: var(--type-font-weight-paragraph);
		letter-spacing: var(--type-letter-spacing-default);
		margin: 0 0 var(--spacing-24);
	}

	h1 strong,
	h2 strong,
	h3 strong,
	h4 strong,
	h5 strong,
	h6 strong,
	p strong {
		font-weight: 600;
	}

	code,
	pre {
		font-size: var(--body-font-size-s);
	}

	code {
		padding: 0.125em;
	}

	pre {
		overflow: scroll;
		padding: var(--spacing-16);
		border-radius: var(--radius-small);
		background-color: var(--colors-tile-default);
		overflow-x: auto;
		white-space: pre;
	}

	main {
		overflow-x: hidden;
	}

	main pre {
		background-color: var(--colors-tile-default);
		padding: 1em;
		border-radius: var(--radius-small);
		font-size: var(--body-font-size-s);
	}

	input,
	textarea,
	select,
	button {
		font: inherit;
	}

	/* links */
	a {
		color: var(--link-color);
		display: inline-block;
		transition: color 0.2s ease;
		overflow-wrap: break-word;
		text-decoration: none;
	}

	.section.primary a {
		color: var(--colors-content-primary);
	}

	.section.secondary a,
	.section.tertiary a {
		color: var(--colors-content-invert-primary);
	}

	a:hover {
		text-decoration: none;
		color: var(--link-hover-color);
	}

	/* Buttons — Figma: Large button / Label 1, radius small (8px), primary & secondary fills */
	a.button:not(.navbar-dropdown a.button),
	button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		letter-spacing: var(--type-letter-spacing-default);
		transition:
			background-color 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease;
		margin: 0;
		text-decoration: none;
		padding: var(--spacing-12) var(--spacing-32);

		/* min-height: var(--sizing-48); */
		width: auto;
		border-radius: var(--radius-small);
		border: var(--border-default) solid var(--colors-button-primary);
		background-color: var(--colors-button-primary);
		color: var(--colors-content-invert-primary);
		font-style: normal;

		&:hover {
			background-color: var(--colors-button-primary-hover);
			border-color: var(--colors-button-primary-hover);
			color: var(--colors-content-invert-primary);
		}

		&:focus-visible {
			background-color: var(--colors-button-primary-focus);
			border-color: var(--colors-button-primary-focus);
			color: var(--colors-content-invert-primary);
			outline: var(--border-focus) solid var(--colors-link-primary-focus);
			outline-offset: 2px;
		}

		&:active {
			background-color: var(--colors-button-primary-active);
			border-color: var(--colors-button-primary-active);
		}

		&:disabled,
		&:disabled:hover {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}

	/* Primary variant — same filled primary (alias for authored “primary”) */
	a.button.primary:not(.navbar-dropdown a.button),
	button.primary {
		background-color: var(--colors-button-primary);
		border-color: var(--colors-button-primary);
		color: var(--colors-content-invert-primary);

		&:hover {
			background-color: var(--colors-button-primary-hover);
			border-color: var(--colors-button-primary-hover);
			color: var(--colors-content-invert-primary);
		}

		&:focus-visible {
			background-color: var(--colors-button-primary-focus);
			border-color: var(--colors-button-primary-focus);
			color: var(--colors-content-invert-primary);
			outline: var(--border-focus) solid var(--colors-link-primary-focus);
			outline-offset: 2px;
		}

		&:active {
			background-color: var(--colors-button-primary-active);
			border-color: var(--colors-button-primary-active);
		}

		&:disabled,
		&:disabled:hover {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}

	/* Secondary — outline: transparent fill, primary border & text; hover uses secondary surface */
	a.button.secondary:not(.navbar-dropdown a.button),
	button.secondary {
		background-color: transparent;
		border-color: var(--colors-button-primary);
		color: var(--colors-content-primary);

		&:hover {
			background-color: var(--colors-button-secondary-hover);
			border-color: var(--colors-button-primary-hover);
			color: var(--colors-content-primary);
		}

		&:focus-visible {
			background-color: var(--colors-button-secondary-focus);
			border-color: var(--colors-button-primary-focus);
			color: var(--colors-content-primary);
			outline: var(--border-focus) solid var(--colors-link-primary-focus);
			outline-offset: 2px;
		}

		&:active {
			background-color: var(--colors-button-secondary-active);
			border-color: var(--colors-button-primary-active);
			color: var(--colors-content-primary);
		}

		&:disabled,
		&:disabled:hover {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}

	img {
		max-width: 100%;
		width: auto;
		height: auto;
	}

	.icon {
		display: inline-block;
		height: auto;
		max-width: 35px;
		vertical-align: middle;
	}

	.icon img,
	.icon svg {
		height: 100%;
		width: 100%;
	}

	@media only screen and (width >=1024px) {
		:root {
			--header-nav-justify-content: flex-start;
		}
	}

	.hide,
	[aria-hidden]:not([aria-hidden='false']) {
		display: none !important;
	}

	/* Image Clip — 4:3, 16:9, 1:1, 2.31:1, 9:16, 4:5 with max size output of 1920x1080 */
	.adjust-ratio-4-3 img {
		object-fit: cover;
		aspect-ratio: 4 / 3;
	}

	.adjust-ratio-16-9 img {
		object-fit: cover;
		aspect-ratio: 16 / 9;
	}

	.adjust-ratio-1-1 img {
		object-fit: cover;
		aspect-ratio: 1 / 1;
	}

	.adjust-ratio-231-3 img {
		object-fit: cover;
		aspect-ratio: 2.31 / 1;
	}

	.adjust-ratio-9-16 img {
		object-fit: cover;
		aspect-ratio: 9 / 16;
	}

	.adjust-ratio-4-5 img {
		object-fit: cover;
		aspect-ratio: 4 / 5;
	}

	/* Standard Spacing */
	.spacing-none,
	.top-bottom-none {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Main spacing (default): side-amount */
	.top-small {
		padding-top: var(--spacing-16);
	}

	.top-medium {
		padding-top: var(--spacing-32);
	}

	.top-large {
		padding-top: var(--spacing-64);
	}

	.top-x-large {
		padding-top: 6rem;
	}

	.top-xx-large {
		padding-top: 8rem;
	}

	.bottom-small {
		padding-bottom: var(--spacing-16);
	}

	.bottom-medium {
		padding-bottom: var(--spacing-32);
	}

	.bottom-large {
		padding-bottom: var(--spacing-64);
	}

	.bottom-x-large {
		padding-bottom: 6rem;
	}

	.bottom-xx-large {
		padding-bottom: 8rem;
	}

	.top-bottom-small {
		padding-top: var(--spacing-16);
		padding-bottom: var(--spacing-16);
	}

	.top-bottom-medium {
		padding-top: var(--spacing-32);
		padding-bottom: var(--spacing-32);
	}

	.top-bottom-large {
		padding-top: var(--spacing-64);
		padding-bottom: var(--spacing-64);
	}

	.top-bottom-x-large {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	.top-bottom-xx-large {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}

	/* sm = small viewport. Small tab: < 768px */
	@media (width <= 767px) {
		.sm-top-small {
			padding-top: var(--spacing-16);
		}

		.sm-top-medium {
			padding-top: var(--spacing-32);
		}

		.sm-top-large {
			padding-top: var(--spacing-64);
		}

		.sm-top-x-large {
			padding-top: 6rem;
		}

		.sm-top-xx-large {
			padding-top: 8rem;
		}

		.sm-bottom-small {
			padding-bottom: var(--spacing-16);
		}

		.sm-bottom-medium {
			padding-bottom: var(--spacing-32);
		}

		.sm-bottom-large {
			padding-bottom: var(--spacing-64);
		}

		.sm-bottom-x-large {
			padding-bottom: 6rem;
		}

		.sm-bottom-xx-large {
			padding-bottom: 8rem;
		}

		.sm-top-bottom-small {
			padding-top: var(--spacing-16);
			padding-bottom: var(--spacing-16);
		}

		.sm-top-bottom-medium {
			padding-top: var(--spacing-32);
			padding-bottom: var(--spacing-32);
		}

		.sm-top-bottom-large {
			padding-top: var(--spacing-64);
			padding-bottom: var(--spacing-64);
		}

		.sm-top-bottom-x-large {
			padding-top: 6rem;
			padding-bottom: 6rem;
		}

		.sm-top-bottom-xx-large {
			padding-top: 8rem;
			padding-bottom: 8rem;
		}
	}

	/* md = medium viewport. Medium tab: 768px–1023px */
	@media (width >= 768px) and (width <= 1023px) {
		.md-top-small {
			padding-top: var(--spacing-16);
		}

		.md-top-medium {
			padding-top: var(--spacing-32);
		}

		.md-top-large {
			padding-top: var(--spacing-64);
		}

		.md-top-x-large {
			padding-top: 6rem;
		}

		.md-top-xx-large {
			padding-top: 8rem;
		}

		.md-bottom-small {
			padding-bottom: var(--spacing-16);
		}

		.md-bottom-medium {
			padding-bottom: var(--spacing-32);
		}

		.md-bottom-large {
			padding-bottom: var(--spacing-64);
		}

		.md-bottom-x-large {
			padding-bottom: 6rem;
		}

		.md-bottom-xx-large {
			padding-bottom: 8rem;
		}

		.md-top-bottom-small {
			padding-top: var(--spacing-16);
			padding-bottom: var(--spacing-16);
		}

		.md-top-bottom-medium {
			padding-top: var(--spacing-32);
			padding-bottom: var(--spacing-32);
		}

		.md-top-bottom-large {
			padding-top: var(--spacing-64);
			padding-bottom: var(--spacing-64);
		}

		.md-top-bottom-x-large {
			padding-top: 6rem;
			padding-bottom: 6rem;
		}

		.md-top-bottom-xx-large {
			padding-top: 8rem;
			padding-bottom: 8rem;
		}
	}

	@media (width >= 768px) {
		[data-spacing='top-bottom-small'],
		.top-bottom-small {
			padding-top: var(--spacing-16);
			padding-bottom: var(--spacing-16);
		}

		[data-spacing='top-bottom-medium'],
		.top-bottom-medium {
			padding-top: var(--spacing-64);
			padding-bottom: var(--spacing-64);
		}
	}

	/* 1024px+: main spacing scale + lg = large viewport (Large tab) */
	@media (width >= 1024px) {
		.top-large {
			padding-top: 8rem;
		}

		.top-x-large {
			padding-top: 12rem;
		}

		.top-xx-large {
			padding-top: 16rem;
		}

		.bottom-large {
			padding-bottom: 8rem;
		}

		.bottom-x-large {
			padding-bottom: 12rem;
		}

		.bottom-xx-large {
			padding-bottom: 16rem;
		}

		.top-bottom-large {
			padding-top: 8rem;
			padding-bottom: 8rem;
		}

		.top-bottom-x-large {
			padding-top: 12rem;
			padding-bottom: 12rem;
		}

		.top-bottom-xx-large {
			padding-top: 16rem;
			padding-bottom: 16rem;
		}

		/* lg = large viewport */
		.lg-top-small {
			padding-top: var(--spacing-16);
		}

		.lg-top-medium {
			padding-top: var(--spacing-32);
		}

		.lg-top-large {
			padding-top: 8rem;
		}

		.lg-top-x-large {
			padding-top: 12rem;
		}

		.lg-top-xx-large {
			padding-top: 16rem;
		}

		.lg-bottom-small {
			padding-bottom: var(--spacing-16);
		}

		.lg-bottom-medium {
			padding-bottom: var(--spacing-32);
		}

		.lg-bottom-large {
			padding-bottom: 8rem;
		}

		.lg-bottom-x-large {
			padding-bottom: 12rem;
		}

		.lg-bottom-xx-large {
			padding-bottom: 16rem;
		}

		.lg-top-bottom-small {
			padding-top: var(--spacing-16);
			padding-bottom: var(--spacing-16);
		}

		.lg-top-bottom-medium {
			padding-top: var(--spacing-32);
			padding-bottom: var(--spacing-32);
		}

		.lg-top-bottom-large {
			padding-top: 8rem;
			padding-bottom: 8rem;
		}

		.lg-top-bottom-x-large {
			padding-top: 12rem;
			padding-bottom: 12rem;
		}

		.lg-top-bottom-xx-large {
			padding-top: 16rem;
			padding-bottom: 16rem;
		}
	}

	.default-content-wrapper {
		width: 100%;
	}
}